<template>
    <div class="noteDetails">
      <el-row class="bread-nav">
        <ul class="bread-nav-title">
          <span>注单明细</span>
        </ul>
        <ul class="bread-nav-content-right">
          <div class="bread-nav-content-right-date">
            <span>
              选择日期：
            </span>
            <select v-model="paramsDate" @change="selectGetNote(1)">
              <option v-for="(item, key, index) in dates" :key="index" :value="key">
                {{item}}
              </option>
            </select>
          </div>
          <a class="back" @click="goBack">返回</a>
        </ul>
      </el-row>

      <div class="content">
        <table class="myTable">
          <thead>
            <tr>
              <th>
                注单号
              </th>
              <th>
                投注时间
              </th>
              <th>
                投注种类
              </th>
              <th>
                账号
              </th>
              <th>
                投注内容
              </th>
              <th>
                下注金额
              </th>
              <th>
                退水
              </th>
              <th>
                下注结果
              </th>
              <th>
                本级占成
              </th>
              <th class="redSpan">
                本级结果
              </th>
              <th>
                占成明细
              </th>
            </tr>
          </thead>
          <tbody v-if="betsList">
            <tr v-for="(item, index)  in betsList" :key="index" class="myTableTr">
              <td>
                <ul>
                  <li>
                    <button class="tableBtn">
                      {{item.oid}}
                    </button>
                  </li>
                  <li v-if="isPadding" class="blackLi">
                    代理补货
                  </li>
                </ul>
              </td>
              <td>
                {{item.created_at}}
              </td>
              <td>
                <ul>
                  <li>{{item.lottery}}</li>
                  <li>{{item.period}}</li>
                </ul>
              </td>
              <td>
                <ul>
                  <li>{{item.username}}</li>
                  <li>{{item.handicap}}</li>
                </ul>
              </td>
              <td>
                <ul class="tableUl">
                  <li v-for="(subItem, subIndex) in item.content" :key="subIndex">
                    {{subItem}}
                  </li>
                </ul>
              </td>
              <td>
                {{item.amount}}
              </td>
              <td>
                {{item.commission}}
              </td>
              <td :class="(parseFloat(item.result) >= 0 || !isNumber(item.result))?'blueSpan':'redSpan'">
                {{item.result}}
              </td>
              <td>
                {{item.curr_level_share}}
              </td>
              <td :class="parseFloat(item.curr_level_result) >= 0?'blueSpan':'redSpan'">
                {{item.curr_level_result}}
              </td>
              <td>
                <button class="tableBtn" @click="showDetails(item.shares,item.oid)">
                  明细
                </button>
              </td>
            </tr>
          </tbody>
          <tbody v-if="betsList.length===0">
          <tr>
              <td colspan="11">
                暂时没有数据
              </td>
            </tr>
          </tbody>
        </table>

        <el-row class="noticeFooter">
          <ul class="noticeFooter-left">共{{pageInfo.totalCount}}笔注单 共{{pageNums.length}}页</ul>
          <ul class="noticeFooter-right">
            <button @click="selectGetNote(1)">首页</button>
            <button @click="selectGetNote(--currtPage)">前一页</button>
            <span>【</span>
            <button v-for="item in pageNums" :key="item" :class="item === currtPage?'noticeFooterSelected':''" @click="selectGetNote(item)">
              {{item}}
            </button>
            <span>】</span>
            <button @click="selectGetNote(++currtPage)">后一页</button>
            <button @click="selectGetNote(lastPage)">末页</button>
          </ul>
        </el-row>
      </div>

      <div id="dialog" class="myDialog" style="display:none;">
        <div class="myDialogDiv">
          <table class="myTable">
            <thead>
            <tr>
              <th>类型</th>
              <th>账号</th>
              <th>占成</th>
              <th>退水</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in this.subBetInfo" :key="index">
              <td>{{item.agent_level}}</td>
              <td>{{item.username}}</td>
              <td>{{item.share}}</td>
              <td>{{item.comm}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>


    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import $ from 'jquery'
  import 'jquery-ui/ui/widgets/dialog'
  import { isNumber } from '@/utils/validate'

  export default {
    name: 'noteDetails',
    methods: {
      isNumber,
      showDetails(value, period) {
        this.subBetInfo = value
        $('#dialog').dialog({
          title: period + '占成明细',
        })
        $('#dialog').dialog("open")
        const tmp = $('.ui-dialog-titlebar-close').children().clone()
        $('.ui-dialog-titlebar-close').html('').append(tmp)
      },
      formatTime(num) {
        return num.substring(0, 4) + '-' + num.substring(4, 6) + '-' + num.substring(6, 8)
      },
      selectGetNote(value) {
        if (value < 0) {
          value = 1
        }
        if (value > this.lastPage) {
          value = this.lastPage
        }
        const params = JSON.parse(this.$route.query.parObj)
        const tempParams = {
          bt: this.paramsDate,
          et: this.paramsDate,
          date: this.formatTime(this.paramsDate),
          settle: params.ostatus,
          username: this.otherUserName,
          games: params.games,
          page: parseInt(value),
        }
        this.$router.push({
          name: 'noteDetails',
          query: {
            parObj: JSON.stringify(tempParams),
          },
        })
      },
      fetchData(page) {
        // if (this.$route.query.isPadding) {
        //   this.isPadding = JSON.parse(this.$route.query.isPadding)
        // }
        const tempParams = JSON.parse(this.$route.query.parObj)
        if (page) {
          tempParams.page = 1
        }
        // if (this.isPadding) {
        //   tempParams.isPadding = 1
        // }
        this.$store.dispatch('GetOrderBets', tempParams)
          .then(response => {
            if (response.bets === undefined) {
              this.$message({
                type: 'success',
                message: response.message,
              })
            } else {
              this.currtPage = response.curr_page
              const temp = {
                totalCount: response.totalCount,
                totalPages: response.totalPages,
                curr_page: response.curr_page,
              }
              this.pageInfo = temp
              this.betsList = response.bets
              this.dates = response.dates
              this.paramsDate = Object.keys(response.dates)[0]
              console.log(response)
            }
          })
      },
      goBack() {
        this.$router.go(-1)
        // console.log(this.$route)
      },
    },
    // created() {
    //   this.fetchData()
    //   console.log(this.$store.getters.noteDetails,'111111111')
    // },
    computed: {
      ...mapGetters([
        'info',
        'noteDetails',
        'otherUserName',
        'payFromParams',
      ]),
      pageNums() {
        const num = this.pageInfo.totalPages
        this.lastPage = num
        const ArrayNum = []
        for (let i = 1; i <= num; i++) {
          ArrayNum.push(i)
        }
        return ArrayNum
      },
    },
    mounted() {
      $('#dialog').dialog({
        width: 430,
        autoOpen: false,
      })
      this.fetchData(1)
    },
    data() {
      return {
        paramsDate: '',
        dates: {},
        pageInfo: '',
        lastPage: '',
        currtPage: 1,
        betsList: '',
        betInfo: '',
        subBetInfo: '',
        dialogTableVisible: false,
        isPadding: false,
      }
    },
    watch: {
      $route(to, from) {
        // 监控路由变化,从新加载数据
        this.fetchData()
      },
    },
  }
</script>

<style scoped>
  .noteDetails{
    overflow-y: auto;
    bottom:1px;
    top:1px;
    width:100%;
    position: absolute;
  }
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content-right{
    float: right;
    overflow: hidden;
  }
  .bread-nav-content-right-date{
    float: left;
    margin-right: 20px;
    font-size: 13px;
    line-height: 30px;
    color: #2836f4;
  }
  .bread-nav-content-right-date span{
    font-weight: bold;
  }
  .bread-nav-content-right-date select{
    color: #2836f4;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
    float: left;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }

  .content{
    padding: 10px;
  }
  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .deepColor{
    background-color: #F2F2F2;
  }
  .tableBtn{
    color:blue;
    background-color: rgba(0,0,0,0);
    border: none;
    outline: none;
    cursor: pointer;
  }
  .tableBtn:hover{
    text-decoration: underline;
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }

  .noticeFooter {
    background-color: #EEEEEE;
    margin: 5px 0;
    font-size:13px;
    padding:5px 0;
  }

  .noticeFooter-left {
    float: left;
  }

  .noticeFooter-right {
    float: right;
  }

  .noticeFooter-right button {
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    color: blue;
    cursor: pointer;
  }

  .noticeFooter-right button:hover {
    color: red;
    text-decoration: underline;
  }

  .noticeFooterSelected {
    color: #ccc !important;
  }
  .myDialog{
    background-color: #FFF;
    margin: 0;
  }
  .myDialogDiv{
    background-color: #FFF;
    width:400px;
  }

  .redSpan{
    color:red !important;
    font-weight: bold;
  }
  .blueSpan{
    color:blue !important;
    font-weight: bold;
  }
  .blackLi{
    color:black !important;
  }
</style>
